

import React, { useRef, useState } from 'react'
import { Row, Col, Form, Input, Button, Typography, Select } from "antd"
import { toast } from '../../utils/common'
import { UploadOutlined } from '@ant-design/icons';
import { ajax } from '../../api';
import { observer } from 'mobx-react';
import user from '../../mobx/store/user';
import { baseURL } from '../../api/request';
import Checkbox from 'antd/lib/checkbox/Checkbox';

const { Title } = Typography



function AnnoAdd({ history }: any) {
    const { userInfo, changeUserInfo } = user
    const [keyboard, setKeyboard] = React.useState(false);
    const onChange = (e: any) => {
        console.log(e.target.checked);

    }

    const onFinish = async (value: any) => {
        console.log(value);
        console.log(keyboard);
        value.userInfo = userInfo
        value.recommended = keyboard
        let { code, result }: any = await ajax.annoadd(value)
        if (code == 200) {
            history.push("/main/anno/list")
        }

    }
    const onFinishFailed = () => {
        toast.error("请输入有效的公告信息")
    }

    const [form] = Form.useForm()
    const ufile: any = useRef()
    const handleClickUpload = () => {
        ufile.current.click()
    }
    const [imgSrc, setImgSrc] = useState<any>(null)
    const startUploadeFile = async () => {


        const file = ufile.current.files[0]
        console.log(file);
        const data = new FormData()
        data.append("file", file)
        let { code, result, path }: any = await ajax.uploadfile(data)
        if (code == 200) {
            setImgSrc(path)
            form.setFieldsValue({ desc: path })
        }

    }



    return (
        <div style={{ height: "100%" }}>
            <Title level={4}> 添加公告</Title>
            <Row>
                <Col xs={18} sm={12} md={8} lg={6}>
                    <Form
                        name='basic'
                        labelCol={{ span: 24 }}
                        wrapperCol={{ span: 24 }}
                        initialValues={{
                            password: "qwe123"
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                        form={form}
                    >
                        <Form.Item
                            label="公告标题"
                            name="title"
                            rules={[{ required: true, message: '请输入公告标题!' }]}
                        >
                            <Input placeholder="请输入公告标题" />
                        </Form.Item>
                        <Form.Item
                            label="公告内容"
                            name="content"
                            rules={[
                                { required: true, message: '请输入公告内容!' },
                            ]}
                        >

                            <Input.TextArea cols={10} rows={6} placeholder="请输入公告内容" />
                        </Form.Item>
                        <Form.Item
                            label="是否推荐"
                            name="recommended"
                            rules={[
                                { message: '请输入选择!' },
                            ]}
                        >
                            <Checkbox
                                onChange={() => {
                                    setKeyboard(!keyboard);
                                }}
                                checked={keyboard}
                            >

                            </Checkbox>


                        </Form.Item>
                        <Form.Item
                            label="公告描述"
                            name="desc"
                            rules={[
                                { required: true, message: '上传图片!' },
                            ]}
                        >
                            {/* 上传图片  */}
                            <input type="file" ref={ufile} style={{ display: "none" }} onChange={startUploadeFile} />
                            <Button type="primary" onClick={handleClickUpload} icon={<UploadOutlined />}>{imgSrc ? '替换' : '上传'}公告图片</Button>
                            {
                                imgSrc && <img src={imgSrc.replace(/public/, baseURL)} alt="" style={{ width: '100%', height: 180, borderRadius: "6px", margin: "10px 0" }} />
                            }
                        </Form.Item>
                        <Form.Item >
                            <Row>
                                <Col span={24} >
                                    <Button danger block htmlType="submit"  > 添加公告 </Button>
                                </Col>
                            </Row>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
        </div>
    )
}
export default observer(AnnoAdd)